<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px">
		
      <el-form-item label="id" prop="id" v-if="mode=='show'">
        <el-input v-model="form.id" placeholder="请输入id" clearable></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号" clearable></el-input>
      </el-form-item>
	  
	  <template v-if="mode=='add'">
		<el-form-item label="登录密码" prop="password">
			<el-input type="password" v-model="form.password" show-password></el-input>
			<sc-password-strength ref="passwordStrength" v-model="form.password"></sc-password-strength>
			<div class="el-form-item-msg">请输入包含字母、数字的8位以上密码</div>
		</el-form-item>
		<el-form-item label="确认密码" prop="password2">
			<el-input type="password" v-model="form.password2" show-password></el-input>
		</el-form-item>		
  	  </template>
	  
  	  <el-form-item label="密码过期时间" prop="passwordExpired">
		<el-date-picker type="datetime" :format="this.$CONFIG.DATE_TIME_FORMAT_TEXT" :value-format="this.$CONFIG.DATE_TIME_FORMAT_VALUE" v-model="form.passwordExpired" placeholder="选择时间或留空"></el-date-picker>
		<el-button @click="passwordGeneratorVisible = true" v-if="mode=='add'">生成密码</el-button> 
      </el-form-item>
      <el-form-item label="" prop="passwordNext">
		<el-checkbox v-model="form.passwordNext" :true-label="1" :false-label="0" :checked="form.passwordNext"></el-checkbox> 
		&nbsp;下次登录要求修改密码
      </el-form-item>

      <!-- <el-form-item label="启用状态" prop="isDisabled">
		<el-switch v-model="form.isDisabled" :active-value="0" :inactive-value="1"></el-switch>
      </el-form-item> -->
	  
      <!-- <el-form-item label="用户来源" prop="source">
        <el-input v-model="form.source" placeholder="请输入用户来源, create, register, ..." clearable></el-input>
      </el-form-item> -->
      <el-form-item label="用户邮箱" prop="mail">
        <el-input v-model="form.mail" placeholder="请输入用户邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号码" clearable></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入电话号码" clearable></el-input>
      </el-form-item>
      <el-form-item label="分机号码" prop="phoneExt">
        <el-input v-model="form.phoneExt" placeholder="请输入分机号码" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item label="所属部门ID" prop="deptId">
        <el-input v-model="form.deptId" placeholder="请输入所属部门ID" clearable></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="岗位ID" prop="postId">
        <el-input v-model="form.postId" placeholder="请输入岗位ID" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="账号过期时间" prop="expiredTime">
		<el-date-picker type="datetime" :format="this.$CONFIG.DATE_TIME_FORMAT_TEXT" :value-format="this.$CONFIG.DATE_TIME_FORMAT_VALUE" v-model="form.expiredTime" placeholder="选择时间或留空"></el-date-picker>
      </el-form-item>

	  <template v-if="mode=='show'">
		<el-form-item label="头像" prop="avatar">
			<el-input v-if="form.avatar == null || form.avatar == ''" v-model="form.avatar" placeholder="未设置" clearable></el-input>
		</el-form-item>
		<el-form-item label="创建/注册时间" prop="createTime">
			<el-date-picker type="datetime" :format="this.$CONFIG.DATE_TIME_FORMAT_TEXT" :value-format="this.$CONFIG.DATE_TIME_FORMAT_VALUE" v-model="form.createTime" placeholder="选择时间或留空"></el-date-picker>
		</el-form-item>
		<el-form-item label="修改时间" prop="updateTime">
			<el-date-picker type="datetime" :format="this.$CONFIG.DATE_TIME_FORMAT_TEXT" :value-format="this.$CONFIG.DATE_TIME_FORMAT_VALUE" v-model="form.updateTime" placeholder="选择时间或留空"></el-date-picker>
		</el-form-item>
		<el-form-item label="邮件验证状态" prop="isMail">
			<span v-if="form.isMail==1" plain size="small" text>
				<sc-status-indicator type="success"></sc-status-indicator> 已验证
			</span>
			<span v-if="form.isMail!=1" plain size="small" text>
				<sc-status-indicator type="info"></sc-status-indicator> 未验证
			</span>
		</el-form-item>
		<el-form-item label="手机验证状态" prop="isMobile">			
			<span v-if="form.isMobile==1" plain size="small" text>
				<sc-status-indicator type="success"></sc-status-indicator> 已验证
			</span>
			<span v-if="form.isMobile!=1" plain size="small" text>
				<sc-status-indicator type="info"></sc-status-indicator> 未验证
			</span>
		</el-form-item>
		<el-form-item label="最后登录时间" prop="loginTime">
			<el-input v-model="form.loginTime" placeholder="请输入最后登录时间" clearable></el-input>
		</el-form-item>
		<el-form-item label="最后登录IP" prop="loginIp">
			<el-input v-model="form.loginIp" placeholder="请输入最后登录IP" clearable></el-input>
		</el-form-item>
		<el-form-item label="登录次数" prop="loginCount">
			<el-input v-model="form.loginCount" placeholder="请输入登录次数" clearable></el-input>
		</el-form-item>
	  </template>
	
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false" >取 消</el-button>
      <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
	<password-generator v-if="passwordGeneratorVisible" @success="handleGenPassword" @closed="passwordGeneratorVisible=false"></password-generator>
  </el-dialog>
</template>

<script>
	import { verifyMail,verifyNumber } from '@/sys/checker'
	import { verifyPhone } from '@/utils/verificate';
	import setting from './setting'
	import scPasswordStrength from '@/components/scPasswordStrength8'
	import PasswordGenerator from '@/components/ncPasswordGenerator'
	import JSEncrypt from 'jsencrypt'
	export default {
		emits: ['success', 'closed'],
		components: {
			scPasswordStrength,
			PasswordGenerator
		},
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				passwordGeneratorVisible: false,
				isSaveing: false,
				//表单数据
				form: {
					id: null,
					username: '',
					password: '',
					passwordUpdate: null,
					passwordExpired: null,
					passwordNext: 0,
					name: '',
					isDisabled: 0,
					isMail: 0,
					isMobile: 0,
					loginTime: null,
					loginIp: '',
					loginCount: 0,
					// source: '',
					mail: '',
					mobile: '',
					phone: '',
					phoneExt: '',
					avatar: '',
					deptId: 0,
					postId: 0,
					expiredTime: null,
					createTime: null,
					updateTime: null,
					remark: '',
					_: ""
				},
				//验证规则
				rules: {
					// sort: [
					// 	{required: true, message: '请输入排序', trigger: 'change'}
					// ],
					name: [
						{required: true, message: '请输入姓名'}
					],
					username: [
						{required: true, message: '请输入账号'}
					],
					password: [
						{required: true, message: '请输入密码'},
						{validator: (rule, value, callback) => {
							this.$refs.passwordStrength.strength(value)
							let passLevel = this.$refs.passwordStrength.level
							if (passLevel < 2) {
								callback(new Error('密码复杂度不足'));
							}else{
								callback();
							}
						}}
					],
					password2: [
						{ required: true, message: '请请入确认密码' },
						{ validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							}else{
								callback();
							}
						}}
					],
					mail: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyMail(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					mobile: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyPhone(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					phone: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyNumber(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					phoneExt: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyNumber(rule,value,callback)
							}else{
								callback();
							}
						} }
					]
				},
				publicKey: null
			}
		},
		async mounted () {
			//导入 public key
			let pubk = await this.$API.system.pub.publicKey.get();
			this.publicKey = (pubk.code == 0) ? pubk.data : null;
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						let res;
						let d = {};
						
						// this.form.password = this.$TOOL.crypto.MD5(this.form.password)
						// this.form.password2 = this.$TOOL.crypto.MD5(this.form.password2)
						for(var n in this.form) {
							d[n] = this.form[n]
						}
						
						//
						if (this.publicKey) {							
							let encrypt = new JSEncrypt();
							encrypt.setPublicKey(this.publicKey)
							d.password = encrypt.encrypt(d.password)
							d.password2 = encrypt.encrypt(d.password2)
						}

						//
						if (this.mode == "edit"){
							res = await setting.api.edit.post(d)
						} else {
							res = await setting.api.add.post(d)
						}
						this.isSaveing = false;
						if(res.code == setting.successCode){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			//表单注入数据
			setData(data){
				this.form.id = data.id
				this.form.username = data.username
				this.form.password = data.password
				this.form.passwordUpdate = data.passwordUpdate
				this.form.passwordExpired = data.passwordExpired
				this.form.passwordNext = data.passwordNext
				this.form.name = data.name
				this.form.isDisabled = data.isDisabled
				this.form.isMail = data.isMail
				this.form.isMobile = data.isMobile
				this.form.isLocked = data.isLocked
				this.form.loginTime = data.loginTime
				this.form.loginIp = data.loginIp
				this.form.loginCount = data.loginCount
				this.form.source = data.source
				this.form.mail = data.mail
				this.form.mobile = data.mobile
				this.form.phone = data.phone
				this.form.phoneExt = data.phoneExt
				this.form.avatar = data.avatar
				this.form.deptId = data.deptId
				this.form.postId = data.postId
				this.form.expiredTime = data.expiredTime
				this.form.createTime = data.createTime
				this.form.updateTime = data.updateTime
				this.form.remark = data.remark

				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				//Object.assign(this.form, data)
			},
			handleGenPassword(p) {
				if (p) {
					this.form.password = p
					this.form.password2 = p
				}
			}
		}
	}
</script>

<style>
</style>
